<template>
  <div>
    <!-- 搜素功能 -->
    <div class="search" style="width: 600px; margin-bottom: 20px">
      <el-input
        placeholder="请输入搜索内容"
        v-model="searchValue"
        @input="handleSearch"
        style="width: 400px"
      ></el-input>
      <el-button type="primary" @click="handleSearch" style="margin-left: 10px"
        >搜索</el-button
      >
    </div>

    <!-- 判断是否有数据 -->
    <div v-if="state.length === 0">
      <p>暂无数据</p>
    </div>

    <div class="pic">
      <el-card
        class="pic-item"
        v-for="item in state"
        :key="item.id"
        @click="showZoomDialog(item)"
      >
        <div @click="getImgUrl(item.relativeFilePath)" class="imgs">
          <img :src="item.relativeFilePath" loading="lazy" alt="" @error="handleImageError" />
        </div>
        <div @click.stop="preventClick">{{ item.filename }}</div>
      </el-card>
    </div>

    <el-dialog v-model="zoomVisible" width="50%">
      <img
        :src="zoomedImageUrl"
        alt=""
        style="max-width: 100%; max-height: 100%; object-fit: contain"
        @error="handleImageError"
      />
      <div class="zoom-info">
        <el-button @click.stop="btndelFn(zoomedItem.id)">删除</el-button>
      </div>
      <span slot="footer">
        <el-button @click="zoomVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { getImgApi, deleteApi } from "@/utils/api";
import { ElButton, ElDialog } from "element-plus";

const zoomVisible = ref(false);
const zoomedImageUrl = ref("");
const zoomedItem = ref(null);

const state = ref([]);
const id = localStorage.getItem("id");

const init = async () => {
  const res = await getImgApi({ id });
  state.value = res.data.map((item) => ({
    relativeFilePath: item.relativeFilePath, // 后端已经返回完整的URL
    recycle: item.recycle,
    user_id: item.user_id,
    id: item.id,
    filename: item.filename,
    created_at: item.created_at,
  }));
};

init();

const imgurl = ref("");

const showZoomDialog = (item) => {
  zoomedItem.value = item;
  zoomedImageUrl.value = item.relativeFilePath; // 使用后端返回的完整URL
  zoomVisible.value = true;
};

// 处理图片加载错误
const handleImageError = (event) => {
  console.error('图片加载失败:', event.target.src);
  // 设置一个简单的占位符，避免404错误
  event.target.style.display = 'none';
  // 或者可以设置一个默认的背景色
  event.target.parentElement.style.backgroundColor = '#f5f5f5';
  event.target.parentElement.style.display = 'flex';
  event.target.parentElement.style.alignItems = 'center';
  event.target.parentElement.style.justifyContent = 'center';
  event.target.parentElement.innerHTML = '<span style="color: #999;">图片加载失败</span>';
};

const getImgUrl = (url) => {
  imgurl.value = url;
};

// del
const btndelFn = async (id) => {
  const confirmResult = window.confirm(
    `确定要删除 ${zoomedItem.value.filename} 吗？`
  );
  if (!confirmResult) return;
  const res = await deleteApi({ id });
  if (res.code === 200) {
    init();
    zoomVisible.value = false; // Close the zoom dialog after deletion
  }
};

const preventClick = (event) => {
  event.stopPropagation();
};

// 搜素功能
const searchValue = ref("");
const handleSearch = () => {
  if (searchValue.value === "") {
    init();
  } else {
    state.value = state.value.filter((item) => {
      return item.filename.indexOf(searchValue.value) !== -1;
    });
  }
};

watch(searchValue, (newVal, oldVal) => {
  if (newVal === "") {
    init();
  }
});
</script>

<style lang="less" scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}

.imgs {
  width: 150px;
  height: 150px;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s, opacity 0.5s;
  }

  &:hover img {
    transform: scale(1.5);
    opacity: 0.7;
  }
}

.swing-animation {
  transition: transform 1.5s ease-in-out; /* Specify the swinging duration and easing */
}

.pic {
  display: flex;
  flex-wrap: wrap;

  .pic-item {
    position: relative;
    margin: 10px;
    border-radius: 12px;
    transition: transform 0.5s; /* Add transition for the card itself */
    animation: swing 3s ease-in-out infinite alternate; /* Apply infinite alternate swinging animation by default */
  }

  .pic-item:hover {
    animation: none; /* Stop swinging on hover */
  }

  @keyframes swing {
    0%,
    100% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(5deg);
    }
    75% {
      transform: rotate(-5deg);
    }
  }

  .pic-item-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 80%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: all 0.3s;

    .pic-item-mask-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      button {
        margin: 0 5px;
      }
    }
  }

  &:hover .pic-item-mask {
    opacity: 1;
  }
}

.zoom-info {
  position: absolute;
  top: 10px;
  left: 10px;
  color: white;
}
</style>
